<template>
  <div class="condition-item">
    <div class="condition-item__content">
      <div class="main">
        <field-select v-model="subItem" :usedFormItems="usedFormItems" :builtOptions="builtOptions"
          :formFieldsOptions="formFieldsOptions" :prevNodeIsApproverNode="prevNodeIsApproverNode"
          :approverOptions="approverOptions" :prevNodeIsSqlAndHttp="prevNodeIsSqlAndHttp"
          :paramsConfig="paramsConfig" :sqlAndHttpOptions="sqlAndHttpOptions" />
        <el-select v-if="subItem.field" v-model="subItem.symbol" placeholder="运算符号" filterable
          @change="handleChangeSymbol">
          <el-option v-for="item in computedSymbolOptions" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <template v-if="subItem.symbol && isShowSelectValue">
          <field-value-select v-model="subItem" :usedFormItems="usedFormItems"
            :builtOptions="builtOptions" :prevNodeIsApproverNode="prevNodeIsApproverNode"
            :approverOptions="approverOptions" :prevNodeIsSqlAndHttp="prevNodeIsSqlAndHttp"
            :paramsConfig="paramsConfig" :sqlAndHttpOptions="sqlAndHttpOptions" />
        </template>
      </div>
      <div class="control">
        <el-button type="danger" icon="el-icon-delete" circle @click="$emit('delete')"></el-button>
      </div>
    </div>

    <div class="condition-item__relation" v-if="isRelation">
      <el-select class="relation-select" v-model="subItem.logic" @change="handleChangeRelation">
        <el-option v-for="item in logicOptions" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import FieldSelect from './FieldSelect';
import FieldValueSelect from './FieldValueSelect';
import { symbolOptions, SYMBOL_KEY_MAP } from './symbolConfig';

const logicOptions = [
  {
    label: '并且',
    value: "&&"
  },
  {
    label: '或者',
    value: "||"
  }]

const builtOptions = [
  {
    label: '发起人',
    value: "startUser",
    jnpfKey: 'usersSelect',
  },
  {
    label: '发起时间',
    value: "startTime",
    jnpfKey: 'datePicker',
    format: 'yyyy-MM-dd HH:mm:ss'
  },
  {
    label: '当前时间',
    value: "currentTime",
    jnpfKey: 'datePicker',
    format: 'yyyy-MM-dd HH:mm:ss'
  },
  {
    label: '流程名称',
    value: "processName",
    jnpfKey: 'input',
  },
  {
    label: '流程编码',
    value: "processCode",
    jnpfKey: 'input',
  }
]


const generatedApproverOptions = (nodeId) => {

  return [
    {
      label: '上一节点的审批意见',
      value: `${nodeId}documentSplitcomment`,
      jnpfKey: 'input',
    },
    {
      label: '上一节点的同意票数',
      value: `${nodeId}documentSplitauditNum`,
      jnpfKey: 'inputNumber',
    },
    {
      label: '上一节点的否决票数',
      value: `${nodeId}documentSplitrejectNum`,
      jnpfKey: 'inputNumber',
    },
    {
      label: '上一节点的弃权票数',
      value: `${nodeId}documentSplitabstentionNum`,
      jnpfKey: 'inputNumber',
    },
    {
      label: '上一节点的审批人',
      value: `${nodeId}documentSplitnodeAssignee`,
      jnpfKey: 'usersSelect',
    },
  ]
}

const generatedSqlAndHttpOptions = (nodeId) => {
  return [
    {
      label: '上一节点的结果',
      value: `${nodeId}documentSplitresult`,
      jnpfKey: 'input',
    },
    {
      label: '上一节点的异常',
      value: `${nodeId}documentSplitexception`,
      jnpfKey: 'input',
    }

  ]
}

// 范围的逻辑key集合
export const SYMBOL_RANGE_KEY = ['isTimeScope', 'isNotTimeScope', 'isNumberValueScope', 'isNumberValueScope1', 'isNumberValueScope2', 'isNumberValueScope3']

export default {
  name: 'ConditionItem',
  components: { FieldSelect, FieldValueSelect },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    usedFormItems: {
      type: Array,
      default: () => []
    },
    isRelation: {
      type: Boolean,
      default: false,
    },
    formFieldsOptions: {
      type: Array,
      default: () => []
    },
    prevNodeList: {
      type: Array,
      default: () => []
    },
    paramsConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      logicOptions,
      builtOptions
    }
  },
  computed: {
    subItem: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    computedSymbolOptions() {
      const { jnpfKey } = this.subItem;
      let keys = SYMBOL_KEY_MAP[jnpfKey];
      if (keys) {
        return symbolOptions.filter(i => keys.includes(i.value))
      }
      return symbolOptions;
    },
    prevNode() {
      const [preNode] = this.prevNodeList;
      return preNode || {}
    },
    prevNodeIsApproverNode() {
      return ['approver', 'start'].includes(this.prevNode.type)
    },
    prevNodeIsSqlAndHttp() {
      return ["sqlTask", "httpTask"].includes(this.prevNode.type)
    },
    approverOptions() {
      if (this.prevNodeIsApproverNode) {
        const { nodeId } = this.prevNode;
        return generatedApproverOptions(nodeId)
      }
      return []
    },
    sqlAndHttpOptions() {
      if (this.prevNodeIsSqlAndHttp) {
        const { nodeId } = this.prevNode;
        return generatedSqlAndHttpOptions(nodeId)
      }
      return []
    },
    isShowSelectValue() {
      return !(['isBlank', 'isNotBlank'].includes(this.subItem.symbol));
    }
  },
  methods: {
    handleChangeRelation(item) {
      const logicName = this.logicOptions.find(i => i.value === item).label
      this.subItem.logicName = logicName
    },
    handleChangeSymbol(symbol) {
      if (!this.subItem.field) {
        return;
      }
      if (SYMBOL_RANGE_KEY.includes(symbol) && this.subItem.fieldValueType === 2) {
        delete this.subItem.fieldValue
        return;
      }
      this.subItem.fieldValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.condition-item {
  display: flex;
  flex-direction: column;

  &__content {
    display: flex;
    border: 2px solid #eee;
    padding: 8px 4px;
    border-radius: 6px;

    .main {
      display: flex;
      flex: 1;
      flex-direction: column;

      > :not(:last-child) {
        margin-bottom: 10px;
      }
    }

    .control {
      display: flex;
      align-items: center;
      margin-left: 10px;
    }
  }

  &__relation {
    margin: 10px 0;

    .relation-select {
      width: 90px;
    }
  }
}
</style>

